<!--
 * @Author: wjk
 * @Date: 2019-12-31 15:40:51
 * @LastEditors: wjk
 * @LastEditTime: 2020-09-01 15:08:05
 * @description: file content
 -->
<template>
  <base-page-view class-name="page-container vip-container" :style-text="pageStyle">
    <template v-if="!pageLoading">
      <view v-if="isEmpty" class="empty-block">
        <msg-page type="empty_network" text="活动正在准备中~" />
      </view>
      <template v-if="activityData.modules && activityData.modules.length">
        <custom-modules :list="activityData.modules" :scroll-top="scrollTop" />
      </template>
    </template>
    <share-btn v-if="activityConfig.share_login_state && !token" />
    <template v-if="activityData.footer_tabs && activityData.footer_tabs.content_list && activityData.footer_tabs.content_list.length && (activityData.footer_tabs.screenToShow === 0 || showFooterBar)">
      <!-- 占位用的-开始 -->
      <view class="footer-tab hidden">
        <view v-for="(item, index) in activityData.footer_tabs.content_list" :key="index" class="footer-tab-item">
          <b-image :src="item.pic" mode="widthFix" />
        </view>
      </view>
      <!-- 占位用的-结束 -->
      <footer-bar>
        <view class="footer-tab">
          <view v-for="(item, index) in activityData.footer_tabs.content_list" :key="index" class="footer-tab-item" @click="handleFooterTabClick(item)">
            <b-image :src="item.pic" mode="widthFix" />
          </view>
        </view>
      </footer-bar>
    </template>
  </base-page-view>
</template>

<script>
import { mapState } from 'vuex'
import MsgPage from '@/components/msgPage'
import CustomModules from '@/components/customModules'
import ShareBtn from '@/components/customModules/modules/shareBtn.vue'
import FooterBar from '@/components/footerBar'
import { toFunctionDetail } from '@/utils/navigateTo'
import { getQueryString } from '@/utils/tools'

import './index.scss'
export default {
  components: {
    MsgPage,
    CustomModules,
    ShareBtn,
    FooterBar
  },
  data() {
    return {
      page_need_login: true,
      shareOption: {},
      src: '',
      id: '',
      isEmpty: false,
      pageLoading: true,
      pageStyle: '',
      scrollTop: 0,
      screenHeight: 667,
      activityConfig: {
        name: ''
      },
      activityData: {
        modules: []
      },
      showFooterBar: false,
      shareInfo: {}
    }
  },
  computed: {
    ...mapState([
      'token',
      'userInfo'
    ])
  },
  created() {
    const res = uni.getSystemInfoSync()
    this.screenHeight = res.screenHeight
  },
  onLoad(option) {
    this.shareOption = {}
    this.pageLoading = true
    this.isEmpty = false
    this.activityConfig = { name: '' }
    this.activityData = { modules: [] }
    this.shareId = ''
    this.shareInfo = {}
    // if (!this.token || !this.userInfo) {
    //   this.$navigateTo('/pages/login/index', {}, 'redirectTo')
    // } else {
    this.initData()
    // }
  },
  onShow() {
    // if (!this.token || !this.userInfo) {
    //   this.$navigateTo('/pages/login/index', {}, 'redirectTo')
    // }
  },
  onPullDownRefresh() {
    this.isEmpty = false
    if (this.id) {
      this.fetchData()
    } else {
      uni.stopPullDownRefresh()
    }
  },
  onShareAppMessage(res) {
    return this.$queryShareOption(res, this.shareOption)
  },
  onPageScroll(e) {
    const screenToShow = this.activityData.footer_tabs ? this.activityData.footer_tabs.screenToShow : 0
    this.scrollTop = e.scrollTop
    if (screenToShow) {
      this.showFooterBar = e.scrollTop > screenToShow * this.screenHeight
    }
  },
  methods: {
    async initData() {
      const res = await this.$api.promoteApi.getVipUrl({
        userRole: this.userInfo.current_member_card_type || 0
      })
      if (res.success) {
        const info = res.data
        this.src = info.vip_link
        this.share_link = info.share_link
        this.getShareInfo()
        if (this.src.indexOf('pagesDetail/template/index') > -1 || this.src.indexOf('detail/activity') > -1) {
          this.id = getQueryString('id', this.src)
          if (this.id) {
            this.fetchData()
          } else {
            this.$navigateTo('/pages/home/index', {}, 'switchTab')
          }
        } else {
          this.$navigateTo('/pages/home/index', {}, 'switchTab')
        }
      }
    },
    // 获取活动信息
    async fetchData() {
      const res = await this.$api.homeApi.getActivity({
        activity_id: decodeURIComponent(this.id)
      })
      if (res.success && res.data) {
        if (res.data.activity) {
          this.activityData = JSON.parse(res.data.activity.comment || '{ modules: [] }')
          delete res.data.activity.comment
          this.activityConfig = res.data.activity
          if (new Date(this.activityConfig.end_time * 1000) < new Date()) {
            this.$gc.$message({
              title: '提示',
              content: '活动已结束',
              confirmColor: '#FF759F', // 确认按钮颜色
              confirmText: '确定',
              showCancel: false,
              align: 'center'
            })
          }
          this.setBg()
          if (this.userInfo.current_member_card_type <= 1) {
            this.shareInfo = this.activityData
            this.initShare()
          }
          this.$setNavTitle(this.activityConfig.name, this.activityData.isHide)
        } else {
          this.isEmpty = true
        }
      }

      setTimeout(() => {
        this.pageLoading = false
        uni.stopPullDownRefresh()
      }, 10)
    },
    async getShareInfo() {
      if (this.userInfo.current_member_card_type > 1) {
        if (this.share_link) {
          this.shareId = getQueryString('id', this.share_link)
        }
        if (this.shareId) {
          const res1 = await this.$api.homeApi.getActivity({
            activity_id: decodeURIComponent(this.shareId)
          })
          if (res1.success && res1.data) {
            if (res1.data.activity) {
              this.shareInfo = JSON.parse(res1.data.activity.comment || '{ modules: [] }')
              this.initShare()
            }
          }
        }
      }
    },
    // 设置背景
    setBg() {
      if (this.activityData.background) {
        // #ifdef MP-WEIXIN
        uni.setBackgroundColor({
          backgroundColor: this.activityData.background
        })
        // #endif

        this.pageStyle = `background: ${this.activityData.background}${this.activityData.background_image ? ` url(${this.activityData.background_image}) no-repeat cover` : ''};`
      }
    },
    // 底部tab点击
    handleFooterTabClick(item) {
      toFunctionDetail(item)
    },
    // 分享初始化
    initShare() {
      if (!this.shareId && !this.id) {
        return
      }
      if (this.activityConfig.share_login_state && !this.token) {
        this.hideShare()
      } else {
        this.shareOption.share_url = `/pagesDetail/template/index?id=${this.shareId || this.id}&isHide=false`
        if (this.shareInfo.share_title) {
          this.shareOption.share_title = this.shareInfo.share_title
        }
        if (this.shareInfo.share_icon) {
          this.shareOption.share_icon = this.shareInfo.share_icon
          this.shareOption.share_image = this.shareInfo.share_icon
        }
        if (this.shareInfo.description) {
          this.shareOption.share_content = this.shareInfo.description
        }
        console.log(this.shareOption)
        this.showShare()
      }
    }
  }
}
</script>
